<template>
	<view>
		<view class="image1">
			<image src="../../static/bg@2x.png" mode=""></image>
		</view>
		<view class="content">
			<!-- <view class="" :style="'height: '+statusBarHeight+'px;'"></view> -->

			<headerTop :title="tab_title"></headerTop>
			<!-- 通知 -->
			<view class="inform">
				<view class="inform-info">
					<view class="picture" @click="jump(`/pageA/noticeList/noticeList?type=0&name=公告`)">
						<view class="picture_left">
							<image src="../../static/news.png" mode=""></image>
							<view class="line"></view>
						</view>
					</view>
					<view class="info">
						<swiper class="swiper" :circular="true" :vertical="true" :indicator-dots="false"
							:autoplay="true" :interval="3000" :duration="1000">
							<swiper-item v-for="(item,index) in newsList" :key="index">
								<view class="swiper-item" @click="jump(`/pageB/noticeList/noticeList?type=0&name=公告`)">
									<text class="one-omit">{{item.title}}</text>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<!-- 分类 -->
			<view class="classList">
				<view class="classItem" @click="jump(item.url)" v-for="(item,index) in classList" :key="index">
					<image :src="$fun.imgUrl(item.image)" mode=""></image>
					<view class="text">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>

		<view class="facility">
			<view class="facility_top" @click="$fun.jump(`/pages/equipment/equipment`)">
				<view class="left">
					<view class="line"></view>
					<view class="">设备概览</view>
				</view>
				<image src="../../static/next.png" mode=""></image>
			</view>
			<view class="facility_main">
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
				</view>
				<view class="right">
					<view class="">
						<view class=""><text class="ctext" style="background-color: #6FD9FF;"></text>混合业务</view>
						<view class="num">{{deviceData.online}}</view>
					</view>
					<view class="">
						<view class=""><text class="ctext" style="background-color: #426EF6;"></text>定向业务</view>
						<view class="num">{{deviceData.offline}}</view>
					</view>
					<view class="">
						<view class=""><text class="ctext" style="background-color: #C56FFF;"></text>托管</view>
						<view class="num">{{deviceData.trouble}}</view>
					</view>
				</view>
			</view>
		</view>
		<block v-for="(item,index) in list" :key="index">
			<view class="facility flow">
				<view class="facility_top" @click="$fun.jump(`/pageA/userLine?type=${item.key}&name=流量图查看`,0,0)">
					<view class="left">
						<view class="line"></view>
						<view class="">{{item.t}}</view>
					</view>
					<image src="../../static/next.png" mode=""></image>
				</view>
				<view class="flow_main">
					<view class="">
						<view class="">{{item.t1Num}}</view>
						<view class="ntext">{{item.t1}}</view>
					</view>
					<!-- <view class="" style="margin-left: 120rpx;">
						<view class="">874566.147</view>
						<view class="ntext">昨日流量</view>
					</view> -->
				</view>
			</view>
		</block>
		<view style="height: 170upx;">

		</view>
		<appUpdate v-if="appUpdateShow" :update_info="update_info" @closeModel="closeModel"></appUpdate>
		<TabBar :tabBarShow="0"></TabBar>
		<u-popup :show="pictureshow" mode="center" round='20'>
			<view class="picturemodel">
				<view class="name">{{newInfo.title}}</view>
				<scroll-view scroll-y="true" style="height: 580rpx;">
					<view class="richtext">
						<rich-text :nodes="newInfo.content"></rich-text>
					</view>
				</scroll-view>
				<view class="btn" @click="readLog(newInfo.id)">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import appUpdate from "@/components/yzhua006-update/app-update.vue";
	import headerTop from "@/components/dacizi-headtag/dacizi-headtag.vue"
	// import zetankSwiper from "@/components/zetank-swiper/components/zetank-swiper/zetank-swiper.vue"
	import {
		checkUpdate
	} from "@/components/yzhua006-update/js/app-update-check.js";
	export default {
		components: {
			headerTop,
			appUpdate
		},
		data() {
			return {
				statusBarHeight: 0,
				tab_title: "你好，欢迎使用鲲鱬云",
				appUpdateShow: false,
				update_info: {},
				imageList: [],
				newsList: [],
				classList: [],
				product: [],
				tabList: [],
				tabIndex: 0,
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#6FD9FF", "#426EF6", "#C56FFF"],
					padding: [5, 5, 5, 5],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: false,
						position: "right",
						lineHeight: 25,
					},
					title: {
						name: "",
						fontSize: 15,
						color: "#666666",

					},
					subtitle: {
						name: "70%",
						fontSize: 12,
						color: "#333333"
					},
					extra: {
						ring: {
							ringWidth: 10,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					},
				},
				list: [{
						t: '全网流量概括',
						t1: '累计流量',
						t1Num: 0,
						key: 1
					},
					{
						t: '个人流量概括',
						t1: '累计流量贡献',
						t1Num: 0,
						key: 2
					},
					{
						t: '鲲豆奖励概括',
						t1: '累计流量贡献',
						t1Num: 0,
						key: 3
					}
				],
				deviceData: {},
				pictureshow: false,
				newInfo: {
					title: ''
				}
			};
		},
		onShow() {
			this.$fun.ajax.post('index/index', {}).then(res => {
				// console.log(res)
				let imgList = res.data.advert
				for (var i = 0; i < imgList.length; i++) {
					imgList[i].src = this.$fun.imgUrl(imgList[i].image)
				}
				this.imageList = imgList
				this.classList = res.data.category
				this.newsList = res.data.news
				// this.product = res.data.product
			})
			// this.$fun.ajax.post('index/goodstype', {}).then(res => {
			// 	// console.log(res)
			// 	this.tabList = res.data
			// 	this.getShopList(res.data[0].id)
			// })
			if (uni.getStorageSync('token')) {
				//公告
				this.$fun.ajax.post('news/newInfo', {}).then(res => {
					// console.log(res)
					this.newInfo = res.data.info
					let is_read = res.data.is_read
					this.pictureshow = is_read == 0 ? true : false
				})
				//设备
				this.$fun.ajax.post('butt/deviceData', {}).then(res => {
					// console.log(res)
					this.deviceData = res.data
					this.getServerData()
				})
				//流量
				this.$fun.ajax.post('user/incomeKinfo', {}).then(res => {
					if (res.code == 1) {
						this.list = [

							{
								t: '全网流量概括',
								t1: '累计流量',
								t1Num: res.data.totalflow,
								key: 1
							},
							{
								t: '个人流量概括',
								t1: '累计流量贡献',
								t1Num: res.data.flow,
								key: 2
							},
							{
								t: '鲲豆奖励概括',
								t1: '累计流量贡献',
								t1Num: res.data.bean,
								key: 3
							},

						]
					}
				})
			} else {
				const {
					deviceData
				} = this
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					this.opts.subtitle.name = 0
					let res = {
						series: [{
							data: [{
								"name": "混合业务",
								"value": 0
							}, {
								"name": "定向业务",
								"value": 0
							}, {
								"name": "托管",
								"value": 0
							}]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			}

		},
		onLoad() {
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
			// #ifdef APP-PLUS
			this.getAppInfo(0); //获取线上APP版本信息  参数type 0自动检查  1手动检查（手动检查时，之前取消更新的版本也会提示出来）
			// #endif
			// #ifdef MP-WEIXIN
			this.$fun.ajax.post('user/gitH5Qrcode', {}).then(res => {
				if (res.code == 1) {
					const pageUrl = res.data.split('#')[1]
					uni.setStorageSync('gitH5Qrcode', JSON.stringify(pageUrl))
				}
			})
			console.log(123);

			// #endif
		},
		// 分享好友
		onShareAppMessage() {
			return {
				title: '鲲鱬云',
				path: JSON.parse(uni.getStorageSync('gitH5Qrcode')),
			}
		},
		// 分享朋友圈
		onShareTimeline() {
			return {
				title: '鲲鱬云',
				query: JSON.parse(uni.getStorageSync('gitH5Qrcode')),
			}
		},
		mounted() {
			uni.onNetworkStatusChange(function(res) {
				console.log(res.isConnected);
				console.log(res.networkType);
			});
		},
		methods: {
			//已读公告
			readLog(id) {
				this.$fun.ajax.post('news/readLog', {
					id: id
				}).then(res => {
					// console.log(res)
					this.pictureshow = false
				})
			},
			getServerData() {
				const {
					deviceData
				} = this
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					this.opts.subtitle.name = deviceData.total
					let res = {
						series: [{
							data: [{
								"name": "混合业务",
								"value": deviceData.online
							}, {
								"name": "定向业务",
								"value": deviceData.offline
							}, {
								"name": "托管",
								"value": deviceData.trouble
							}]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getShopList(id) {
				this.$fun.ajax.post('index/type_goods', {
					type: id
				}).then(res => {
					// console.log(res)
					for (var i = 0; i < res.data.length; i++) {
						if (res.data[i].label) {
							res.data[i].label = res.data[i].label.split(',')
						} else {
							res.data[i].label = []
						}
					}
					this.product = res.data
				})
			},
			getAppInfo(type) {
				const that = this
				const system_info = uni.getSystemInfoSync();
				let params = {
					os: system_info.platform //本机设备操作系统  （android || ios） 
				}
				if (params.os != 'ios' && params.os != 'android') false; //如果不是安卓或ios 返回false

				//这里自行请求API获取版本信息 建议传入操作系统标识，返回本机对应的操作系统最新版本信息，也就是安卓的返回就是安卓的版本信息  ios返回就是ios的版本信息

				//请求获取最新版本
				plus.runtime.getProperty(plus.runtime.appid, (result) => {
					that.$fun.ajax.post('config/version', {
						version: result.version
					}).then(res => {
						that.update_info = {
							version: res.data.version, //线上版本
							now_url: res.data.pkgUrl, //更新链接
							silent: res.data.silent, //是否是静默更新
							force: res.data.force, //是否是强制更新
							net_check: res.data.net_check, //非WIfi是否提示
							note: res.data.content, //更新内容
						}
						checkUpdate(that.update_info, type, that).then(res => {
							if (res.data) {
								that.appUpdateShow = true
							} else {
								// this.$fun.msg(res.msg)
							}
						}); ///检查更新  
						//checkUpdate 这个方法会做什么？：线上版本号 与 本地版本号做对比 ，如果需要更新  根据静默，强制、wifi等信息执行静默更新或跳转到升级页面
						//跳转升级页面的前提是，需要新建并在pages.json中配置升级页面，配置方法请查看插件详情
					})
				})

			},
			closeModel() {
				this.appUpdateShow = false
			},
			jump(url) {
				this.$fun.jump(url)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F1EE;
	}

	.image1 {
		width: 750rpx;
		height: 400rpx;
		position: absolute;
		top: 0;
		z-index: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		padding: 0 30rpx;
		box-sizing: border-box;
		// background-image: url('../../static/bg@2x.png');
		// background-size: 750rpx 400rpx;
		// background-repeat: no-repeat;
		position: relative;
		z-index: 1;

		.inform {
			// margin-top: 30rpx;

			.inform-info {
				display: flex;
				padding: 0 20rpx;
				width: 690rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 24rpx;

				.picture {
					display: flex;
					align-items: center;
					margin-right: 30rpx;

					image {
						width: 34rpx;
						height: 34rpx;
					}

					&_left {
						display: flex;

						image {
							width: 122rpx;
							height: 22rpx;
						}

						.line {
							width: 2rpx;
							height: 20rpx;
							background: #999999;
							border-radius: 2rpx;
							margin-left: 18rpx;
						}
					}
				}

				.info {
					width: 80%;
					height: 100%;

					.swiper {
						width: 100%;
						height: 100%;

						.swiper-item {
							display: flex;
							align-items: center;
							width: 500rpx;
							height: 100%;
							overflow: hidden;
							flex-wrap: nowrap;
							text-overflow: ellipsis;

							text {
								font-size: 24rpx;
								color: #333333;

							}
						}
					}
				}
			}
		}

		.classList {
			display: flex;
			flex-wrap: wrap;
			width: 690rpx;
			height: 294rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin: 30rpx auto;
			padding: 30rpx 0rpx 10rpx;

			.classItem {
				width: 20%;
				display: flex;
				margin-bottom: 20rpx;
				flex-direction: column;
				align-items: center;

				image {
					width: 72rpx;
					height: 72rpx;
				}

				.text {
					margin-top: 10rpx;
					font-weight: 500;
					font-size: 20rpx;
					color: #333333;
				}
			}
		}

		.businessList {
			margin-top: 40rpx;

			.businessItem {
				margin-bottom: 20rpx;
				height: 170rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.l {
					margin-left: 30rpx;
					height: 100%;
					display: flex;
					align-items: center;

					image {
						width: 110rpx;
						height: 110rpx;
					}

					.text_info {
						margin-left: 30rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;

						.title {
							font-size: 28rpx;
							font-family: Microsoft YaHei;
							font-weight: bold;
							color: #333333;
						}

						.text {
							margin-top: 8rpx;
							color: #333333;
							font-size: 24rpx;
						}

					}
				}

				.r {
					margin-right: 27rpx;
					width: 150rpx;
					height: 60rpx;
					background: #FFFFFF;
					border: 2rpx solid #5990FF;
					border-radius: 30rpx;
					font-size: 28rpx;
					font-family: Microsoft YaHei;
					color: #5990FF;
					text-align: center;
					line-height: 60rpx;
				}
			}
		}
	}

	.facility {
		width: 690rpx;
		height: 258rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 0 auto;

		&_top {
			display: flex;
			justify-content: space-between;
			height: 88rpx;
			align-items: center;

			.left {
				font-weight: 600;
				font-size: 28rpx;
				color: #333333;
				display: flex;
				align-items: center;

				.line {
					width: 8rpx;
					height: 28rpx;
					background: #5990FF;
					margin-right: 22rpx;
				}
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.charts-box {
			width: 190rpx;
			height: 190rpx;
			margin-top: -20rpx;
		}

		&_main {
			width: 100%;
			display: flex;

			.right {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				display: flex;
				justify-content: space-around;
				width: 480rpx;
				align-items: center;

				.ctext {
					display: inline-block;
					margin-right: 6rpx;
					width: 12rpx;
					height: 12rpx;
					border-radius: 6rpx;
				}

				.num {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					margin-top: 10rpx;
				}
			}
		}
	}

	.flow {
		height: 188rpx;
		margin-top: 30rpx;

		&_main {
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
			display: flex;
			margin: 0 30rpx;

			.ntext {
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}

	.picturemodel {
		width: 690rpx;
		height: 800rpx;
		text-align: center;
		padding: 30rpx;

		.name {
			font-weight: 500;
			margin-bottom: 20rpx;
		}

		.richtext {
			height: 620rpx;
		}

		.btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			color: #5990FF;
		}
	}
</style>